<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <p style="text-align: center; margin-bottom: 18px; font-size: 20px; font-weight: bold">连退2150--焊缝距圆盘剪距离: {{ baseInfo.trimlength }}</p>
      </el-col>
      <el-col :span="24">
        <span class="writ">语音报警</span>
        <el-switch
          v-model="value2"
          active-color="#13ce66"
          inactive-color="#333"
          @change="text2(value2)"
        />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div style="height: 320px">
          <nercar-echarts
            :graphic="echartsListOptions[2].graphic"
            :title="echartsListOptions[2].title"
            :grid="echartsListOptions[2].grid"
            :x-axis="echartsListOptions[2].xAxis"
            :y-axis="echartsListOptions[2].yAxis"
            :tooltip="echartsListOptions[2].tooltip"
            :series="echartsListOptions[2].series"
          />
        </div>
      </el-col>
      <el-col :span="12">
        <div style="height: 320px">
          <nercar-echarts
            :graphic="echartsListOptions[1].graphic"
            :title="echartsListOptions[1].title"
            :grid="echartsListOptions[1].grid"
            :x-axis="echartsListOptions[1].xAxis"
            :y-axis="echartsListOptions[1].yAxis"
            :tooltip="echartsListOptions[1].tooltip"
            :series="echartsListOptions[1].series"
          />
        </div>
      </el-col>
      

    </el-row>
    <el-row>
      <el-col :span="24">
        <div style="height: 320px">
          <div
            id="app1"
            style="width: 100%;height: 320px;"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import NercarEcharts from '@/components/NercarEcharts.vue'
import { get, post } from '@/lib/Util'
import Echarts from 'echarts'
export default {
  components: { NercarEcharts },
  layout: 'staticPage',
  data() {
    return {
      valuebe2: '',
      value2: false,
      baseInfo: {
        currentCoilNo: '',
        nextCoilNo: '',
        showLength: 2000,
        targetLengthCurrent: 1700, //第一次读取到圆盘剪得距离
        targetLengthNuxt: 1650, //第二次读取到圆盘剪得距离
        trimlength: 0, //距离圆盘剪距离 传后端
        currentWidth: 0, //前行钢宽度下限
        nextWidth: 0, //后行钢宽度下限
        currTrimFlag: 0, //当前卷是否切边
        nextTrimFlag: 0 //下一卷是否切边
      },
      currentAllData: [], //当前卷曲线数据
      nuxtAllData: {}, //下一卷数据
      currCoilFromPDI: {}, //当前卷数据-从计划中获取
      nextCoilFromPDI: {}, //下一卷数据-从计划中获取
      secondPCDP: [], //下一卷数据-从计划中获取
      HMI_NEXT_CURVE: [], //下一卷数据替代曲线
      alarmLastValue: '', //语音报警上次值
      echartsListOptions: [
        {
          title: {
            show: true,
            text: '',
            textStyle: {
              color: '#fff'
            }
          },
          graphic: [
            {
              type: 'text',
              bottom: 45, // 距离底部的固定距离
              right: 16, // 距离底部的固定距离
              style: {
                text: '(m)', // X轴名称
                fill: '#fff',
                fontSize: 14,
                align: 'center'
              }
            }
          ],
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: { color: '#fff' },
              crossStyle: { color: '#6d7882' }
            }
          },
          grid: {
            left: '3%',
            right: '15%',
            bottom: '15%',
            containLabel: true
          },
          dataZoom: [
            {
              type: 'slider', //滑动条
              show: true, //开启
              xAxisIndex: [0]
            }, //X轴内置滑动
            {
              type: 'inside', //内置滑动，随鼠标滚轮展示
              xAxisIndex: [0]
            }
          ],
          xAxis: [
            {
              type: 'category',
              data: [],
              splitLine: { show: false }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: 'mm',
              nameTextStyle: {
                color: '#fff' // 设置 y 轴名称的颜色为红色
              },
              scale: true //纵坐标自适应
            }
          ],
          series: [
            {
              name: '',
              type: 'line',
              smooth: true,
              showSymbol: false,
              data: [null],
              lineStyle: {
                color: 'green'
              },
              markLine: {
                data: [
                  {
                    // xAxis: 3, // 设置markLine在x轴上的位置
                    yAxis: 0, // 设置markLine在y轴上的位置
                    label: {
                      show: true,
                      position: 'middle',
                      formatter: '下限'
                    },
                    lineStyle: {
                      color: '#FFDA35',
                      type: 'dashed'
                    }
                  },
                  {
                    // xAxis: 3, // 设置markLine在x轴上的位置
                    yAxis: 0, // 设置markLine在y轴上的位置
                    label: {
                      show: true,
                      position: 'middle',
                      formatter: '下限'
                    },
                    lineStyle: {
                      color: '#FFDA35',
                      type: 'dashed'
                    }
                  },
                  {
                    xAxis: 0,
                    lineStyle: {
                      color: '#e7cb3c',
                      width: 5
                    },
                    label: {
                      normal: {
                        show: true,
                        position: 'end',
                        formatter: '圆盘剪位置'
                      }
                    }
                  }
                ]
              }
            }
          ]
        },
        {
          title: {
            show: true,
            text: '',
            textStyle: {
              color: '#fff'
            }
          },
          graphic: [
            {
              type: 'text',
              bottom: 45, // 距离底部的固定距离
              right: 86, // 距离底部的固定距离
              style: {
                text: '(m)', // X轴名称
                fill: '#fff',
                fontSize: 14,
                align: 'center'
              }
            }
          ],
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: { color: '#fff' },
              crossStyle: { color: '#6d7882' }
            }
          },
          grid: {
            left: '3%',
            right: '15%',
            bottom: '15%',
            containLabel: true
          },
          dataZoom: [
            {
              type: 'slider', //滑动条
              show: true, //开启
              xAxisIndex: [0]
            }, //X轴内置滑动
            {
              type: 'inside', //内置滑动，随鼠标滚轮展示
              xAxisIndex: [0]
            }
          ],
          xAxis: [
            {
              type: 'category',
              data: [],
              splitLine: { show: false }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: 'mm',
              min: null,
              max: null,
              nameTextStyle: {
                color: '#fff' // 设置 y 轴名称的颜色为红色
              },
              scale: true //纵坐标自适应
            }
          ],
          series: [
            {
              name: '',
              type: 'line',
              smooth: true,
              showSymbol: false,
              data: [null],
              lineStyle: {
                color: '#25de7c'
              },
              markLine: {
                data: [
                  {
                    // xAxis: 3, // 设置markLine在x轴上的位置
                    yAxis: 0, // 设置markLine在y轴上的位置
                    label: {
                      show: true,
                      position: 'middle',
                      formatter: '下限'
                    },
                    lineStyle: {
                      color: 'red',
                      width: 3, // 加粗标记线
                      type: 'solid'
                    }
                  }
                ],
                silent: true,
                symbol: ['none', 'arrow']
              } /*,
              markLine: {
                lineStyle: {
                  color: '#e7cb3c',
                  type: 'solid'
                },
                label: {
                  fontSize: 15,
                  fontWeight: 'bold'
                },
                silent: true,
                data: [
                  {
                    yAxis: null,
                    label: {
                      normal: {
                        show: true,
                        position: 'end',
                        formatter: ''
                      }
                    },
                    lineStyle: {
                      color: '#e7cb3c'
                      // type: "solid"
                    }
                  },
                  {
                    yAxis: null,
                    label: {
                      normal: {
                        show: true,
                        position: 'end',
                        formatter: ''
                      },
                      lineStyle: {
                        color: '#e7cb3c'
                        // type: "solid"
                      }
                    }
                  }
                ],
                symbol: 'none'
              }*/
            }
          ]
        },
        {
          title: {
            show: true,
            text: '',
            textStyle: {
              color: '#fff'
            }
          },
          graphic: [
            {
              type: 'text',
              bottom: 45, // 距离底部的固定距离
              right: 86, // 距离底部的固定距离
              style: {
                text: '(m)', // X轴名称
                fill: '#fff',
                fontSize: 14,
                align: 'center'
              }
            }
          ],
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: { color: '#fff' },
              crossStyle: { color: '#6d7882' }
            }
          },
          grid: {
            left: '3%',
            right: '15%',
            bottom: '15%',
            containLabel: true
          },
          dataZoom: [
            {
              type: 'slider', //滑动条
              show: true, //开启
              xAxisIndex: [0]
            }, //X轴内置滑动
            {
              type: 'inside', //内置滑动，随鼠标滚轮展示
              xAxisIndex: [0]
            }
          ],
          xAxis: [
            {
              type: 'category',
              data: [],
              splitLine: { show: false }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: 'mm',
              min: null,
              max: null,
              nameTextStyle: {
                color: '#fff' // 设置 y 轴名称的颜色为红色
              },
              scale: true //纵坐标自适应
            }
          ],
          series: [
            {
              name: '',
              type: 'line',
              smooth: true,
              showSymbol: false,
              data: [null],
              lineStyle: {
                color: '#25de7c'
              },
              markLine: {
                data: [
                  {
                    // xAxis: 3, // 设置markLine在x轴上的位置
                    yAxis: 0, // 设置markLine在y轴上的位置
                    label: {
                      show: true,
                      position: 'middle',
                      formatter: '下限'
                    },
                    lineStyle: {
                      color: 'red',
                      width: 3, // 加粗标记线
                      type: 'solid'
                    }
                  }
                ],
                silent: true,
                symbol: ['none', 'arrow']
              }
            }
          ]
        }
      ],
      timer: null,
      timer3: null
    }
  },
  mounted() {
    this.getCurrentCoilNo()
    this.timer = setInterval(() => {
      this.getCurrentCoilNo()
    }, 2000)
  },
  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    async findMusic() {
      let res2 = await post('/apd/HMI', {
        action: 'get_tags',
        operator: 'abc ',
        terminal: 'FM_01',
        body: [
          {
            tagName: 'CAL2150TRIM_AUDIO',
            timestamp: 0
          }
        ]
      })
      if (res2.results[0].value) {
        // 确保新值有效
        if (!this.alarmLastValue) {
          this.alarmLastValue = res2.results[0].value
        } else {
          if (this.alarmLastValue !== res2.results[0].value) {
            // 使用严格不等于比较
            this.alarmLastValue = res2.results[0].value
            const music = new Audio(
              `http://10.171.7.120:1236/${res2.results[0].value}`
            )
            music.onerror = () => console.error('Failed to load or play audio.')
            music
              .play()
              .catch(error => console.error('Audio playback failed:', error))
          }
        }
      } else {
        console.warn('New value is invalid or undefined.')
      }
    },
    text2: function(id) {
      console.log(id)
      if (id) {
        localStorage.setItem('ALARM2150', true)
        // 判断true或false
        if (localStorage.getItem('ALARM2150')) {
          console.log('执行了')
          this.timer2 = setInterval(() => {
            this.findMusic()
          }, 5000)
        }
      } else {
        console.log('关闭了')
        // location.reload()
        localStorage.setItem('ALARM2150', false)
        clearInterval(this.timer2) // 清除定时器
        this.timer2 = null
      }
    },
    async getCurrentCoilNo() {
      let res = await post('/apd/HMI', {
        action: 'get_tags',
        operator: 'abc ',
        terminal: 'FM_01',
        body: [
          {
            tagName: 'CAL2150TRIMCOIL',
            timestamp: 0
          },
          {
            tagName: 'CAL2150TRIMLTH',
            timestamp: 0
          },
          {
            tagName: 'CAL2150_MesPdi',
            timestamp: 0
          },
          {
            tagName: 'CAL2150TRIM',
            timestamp: 0
          },
          {
            tagName: 'CAL2150TRIMCOILFLAG', //当前卷是否切边
            timestamp: 0
          },
          {
            tagName: 'CAL2150TRIMCOILNEXTFLAG', //下一卷是否切边
            timestamp: 0
          }
        ]
      })

      this.baseInfo.currentCoilNo = res.results[0].value //当前卷
      // 焊缝到圆盘剪距离
      this.baseInfo.trimlength = res.results[1].value.toFixed(2)
      this.baseInfo.currTrimFlag = res.results[4].value == 1 ? '切边' : '不切边' //当前卷是否切边
      this.baseInfo.nextTrimFlag = res.results[5].value == 1 ? '切边' : '不切边' //下一卷是否切边
      // console.log('前行钢：' + this.baseInfo.currentCoilNo)
      //获取下一卷卷号
      let index = 0
      for (let i = 0; i < res.results[2].value.length; i++) {
        if (res.results[2].value[i].Entid == this.baseInfo.currentCoilNo) {
          index = i
        }
      }
      this.baseInfo.nextCoilNo = res.results[2].value[index - 1].Entid //后行钢卷号
      this.nextCoilFromPDI = res.results[2].value[index - 1]
      // console.log(this.nextCoilFromPDI.OrderWidth)

      this.currCoilFromPDI = res.results[2].value[index]

      this.HMI_NEXT_CURVE = res.results[3].value
        .filter(item => item.cFLAG === 1)
        .map(item => item.WIDTH)
      // console.log('11111111')
      // console.log('后行钢：' + this.baseInfo.nextCoilNo)
      // console.log(this.nextCoilFromPDI)
      //获取当前卷所有数据
      this.getCurrentAllData(this.baseInfo.currentCoilNo)
    },
    getCurrentAllData(coilNo) {
      // 获取当前卷宽度曲线
      // this.$axios
      //   .$post(
      //     'http://10.171.7.120:8090/coldbigdata/curveData/getCpcData1630',
      //     {
      //       ENTID: coilNo
      //     }
      // )
      post('/apd/HMI', {
        action: 'get_tags',
        operator: 'abc ',
        terminal: 'FM_01',
        body: [
          {
            tagName: 'CAL2150TRIMNOW',
            timestamp: 0
          }
        ]
      }).then(res => {
        let cdata = res.results[0].value
          .filter(item => item.cFLAG === 1)
          .map(item => item.WIDTH)
          .reverse()
        this.currentAllData = cdata
        // //单独显示当前卷和下一卷
        let cxData = []
        for (let i = 0; i < cdata.length; i++) {
          cxData.push(i)
        }
        const minArray = parseInt(Math.min(...cdata))
        const maxArray = parseInt(Math.max(...cdata))
        let minValue = Math.min(
          minArray,
          Number(this.currCoilFromPDI.OrderWidth) + 25
        )
        let maxValue = Math.max(
          maxArray,
          Number(this.nextCoilFromPDI.OrderWidth) + 25
        )
        this.echartsListOptions[1].series[0].data = cdata
        this.echartsListOptions[1].xAxis[0].data = cxData.reverse()
        this.echartsListOptions[1].yAxis[0].min = minValue
        this.echartsListOptions[1].yAxis[0].max = maxValue
        this.echartsListOptions[1].title.text =
          '当前卷' +
          this.baseInfo.currentCoilNo +
          ' ' +
          this.baseInfo.currTrimFlag
        this.echartsListOptions[1].series[0].markLine.data[0].yAxis =
          Number(this.currCoilFromPDI.OrderWidth) + 25
        this.echartsListOptions[1].series[0].markLine.data[0].label.formatter =
          this.baseInfo.currentCoilNo +
          '下限: ' +
          Number(Number(this.currCoilFromPDI.OrderWidth) + 25)
        //获取下一卷宽度曲线
        this.getNextAllData(this.baseInfo.nextCoilNo)
      })
    },
    getNextAllData(coilNo) {
      post('/apd/HMI', {
        action: 'get_tags',
        operator: 'abc ',
        terminal: 'FM_01',
        body: [
          {
            tagName: 'CAL2150TRIMNEXT',
            timestamp: 0
          }
        ]
      }).then(res => {
        let narr = []
        //判断第二卷曲线是否有值
        if (res.results[0].value.every(item => item.cFLAG == 0)) {
          // console.log('11111111')

          //单独显示当前卷和下一卷
          let nxData = []
          for (let i = 0; i < this.HMI_NEXT_CURVE.length; i++) {
            nxData.push(i)
          }
          const minArray = parseInt(Math.min(...this.HMI_NEXT_CURVE))
          const maxArray = parseInt(Math.max(...this.HMI_NEXT_CURVE))
          let minValue = Math.min(
            minArray,
            Number(this.nextCoilFromPDI.OrderWidth) + 25
          )

          let maxValue = Math.max(
            maxArray,
            Number(this.nextCoilFromPDI.OrderWidth) + 25
          )
          // console.log(maxValue)
          this.echartsListOptions[2].series[0].data = this.HMI_NEXT_CURVE.reverse()
          this.echartsListOptions[2].xAxis[0].data = nxData.reverse()
          this.echartsListOptions[2].yAxis[0].min = minValue
          this.echartsListOptions[2].yAxis[0].max = maxValue
          this.echartsListOptions[2].title.text =
            '下一卷:' +
            this.nextCoilFromPDI.Entid +
            ' ' +
            this.baseInfo.nextTrimFlag
          this.echartsListOptions[2].series[0].markLine.data[0].yAxis =
            Number(this.nextCoilFromPDI.OrderWidth) + 25
          this.echartsListOptions[2].series[0].markLine.data[0].label.formatter =
            this.nextCoilFromPDI.Entid +
            '下限: ' +
            Number(Number(this.nextCoilFromPDI.OrderWidth) + 25)
          // 前行钢过长导致后行钢宽度曲线还未保存完整-----临时改换曲线数据源从中间件中获取
          narr = this.HMI_NEXT_CURVE
          // this.nuxtAllData = [{ orderWidth: this.nextCoilFromPDI.OrderWidth }]
        } else {
          // console.log(2222222)

          narr = res.results[0].value
            .filter(item => item.cFLAG === 1)
            .map(item => item.WIDTH)
            .reverse()
          //单独显示当前卷和下一卷
          let nxData = []
          for (let i = 0; i < narr.length; i++) {
            nxData.push(i)
          }
          const minArray = parseInt(Math.min(...narr))
          const maxArray = parseInt(Math.max(...narr))
          let minValue = Math.min(
            minArray,
            Number(this.nextCoilFromPDI.OrderWidth) + 20
          )

          let maxValue = Math.max(
            maxArray,
            Number(this.nextCoilFromPDI.OrderWidth) + 25
          )
          this.echartsListOptions[2].series[0].data = narr.reverse()
          this.echartsListOptions[2].xAxis[0].data = nxData.reverse()
          this.echartsListOptions[2].yAxis[0].min = minValue
          this.echartsListOptions[2].yAxis[0].max = maxValue
          this.echartsListOptions[2].title.text =
            '下一卷' +
            this.baseInfo.nextCoilNo +
            ' ' +
            this.baseInfo.nextTrimFlag
          this.echartsListOptions[2].series[0].markLine.data[0].yAxis =
            Number(this.nextCoilFromPDI.OrderWidth) + 25
          this.echartsListOptions[2].series[0].markLine.data[0].label.formatter =
            this.baseInfo.nextCoilNo +
            '下限: ' +
            Number(Number(this.nextCoilFromPDI.OrderWidth) + 25)
          // 正常情况从mongoDB获取两卷曲线进行拼接
        }

        let carr = this.currentAllData

        let cutIndex = this.baseInfo.trimlength
        // console.log('截取的长度======' + cutIndex)
        // 只保留第一卷未通过圆盘剪的长度
        let widList = []
        widList = [...narr, ...carr.slice(0, cutIndex)]
        // 截取两卷曲线拼接后2000个点
        widList = widList.slice(-this.baseInfo.showLength)
        let xList = []
        let markLineCurrent = Number(this.currCoilFromPDI.OrderWidth) + 25
        let markLineNext = Number(this.nextCoilFromPDI.OrderWidth) + 25
        for (let i = 0; i < widList.length; i++) {
          xList.push(i + 1)
        }
        //获取第一卷带钢占两卷拼接后的长度百分比
        let passdPercent = (cutIndex / xList.length).toFixed(2) * 1
        // console.log('通过百分比：' + passdPercent)
        passdPercent = this.checkpassdPercent(passdPercent)
        if (passdPercent < 0) {
          passdPercent = 0
        }
        if (passdPercent > 1) {
          passdPercent = 1
        }
        this.ehcart_cuzha_temp(
          widList,
          'app1',
          markLineCurrent,
          markLineNext,
          1 - passdPercent
        )
      })
    },
    ehcart_cuzha_temp(dataY1, id, wid_target_1, wid_target_2, percent) {
      const minArray = parseInt(Math.min(...dataY1))
      const maxArray = parseInt(Math.max(...dataY1))
      let minValue = Math.min(wid_target_1, wid_target_2, minArray) - 5
      let maxValue = Math.max(wid_target_1, wid_target_2, maxArray) + 5
      var arrlength = []
      if (dataY1.length > 0) {
        for (let i = 0; i < dataY1.length; i++) {
          arrlength.push(i)
        }
      }
      var option = {
        title: [
          {
            text:
              `当前卷:${this.baseInfo.currentCoilNo}` +
              '下限:' +
              wid_target_1 +
              'mm',
            right: 'center',
            top: '0',
            textStyle: {
              color: 'yellow'
            }
          },
          {
            text:
              `下一卷:${this.baseInfo.nextCoilNo}` +
              '下限:' +
              wid_target_2 +
              'mm',
            right: 'center',
            top: '20',
            textStyle: {
              color: '#FF40E6'
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(32, 33, 36,.7)',
          borderColor: 'rgba(32, 33, 36,0.20)',
          borderWidth: 1,
          textStyle: {
            // 文字提示样式
            color: '#fff',
            fontSize: '12'
          },
          axisPointer: {
            // 坐标轴虚线
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        }, //数据悬浮
        grid: {
          left: '8%',
          right: '8%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          intercal: 50,
          boundaryGap: false,
          axisLabel: {
            show: true
          },
          // //XY坐标轴样式修改axisLine
          axisLine: {
            lineStyle: {
              color: '#ffffff'
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: 'dotted'
            }
          },
          nameTextStyle: {
            color: '#bfbfbf',
            fontWeight: 'bold',
            fontSize: 16
          },
          name: '',
          data: arrlength.reverse()
        },
        yAxis: [
          {
            type: 'value',
            name: '(mm)',
            min: minValue,
            max: maxValue,
            splitLine: {
              type: 'dotted',
              show: true,
              lineStyle: {
                color: '#65687d'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
            nameTextStyle: {
              padding: [0, 0, 0, 40],
              fontSize: 16,
              color: '#bfbfbf'
            },
            // axisLabel: {
            //   formatter: '{value}',
            //   textStyle: {
            //     color: '#bfbfbf' //更改坐标轴文字颜色
            //   }
            // },
            scale: true //纵坐标自适应
          }
        ],
        series: [
          {
            name: '',
            type: 'line',
            data: dataY1,
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: '#FF40E6' // 0% 处的颜色
                },
                {
                  offset: percent,
                  color: '#FF40E6'
                },
                {
                  offset: percent,
                  color: 'yellow'
                },
                {
                  offset: 1,
                  color: 'yellow' // 100% 处的颜色
                }
              ],
              global: false // 缺省为 false
            },
            markLine: {
              lineStyle: {
                color: 'red',
                type: 'solid'
              },
              label: {
                fontSize: 15,
                fontWeight: 'bold'
              },
              silent: true,
              data: [
                {
                  yAxis: wid_target_2,
                  label: {
                    normal: {
                      show: true,
                      position: 'start',
                      formatter: '下一卷下限:' + wid_target_2 + 'mm'
                    }
                  },
                  lineStyle: {
                    color: 'red'
                    // type: "solid"
                  }
                },
                {
                  yAxis: wid_target_1,
                  label: {
                    normal: {
                      show: true,
                      position: 'end',
                      formatter: '当前卷下限:' + wid_target_1 + 'mm'
                    },
                    lineStyle: {
                      color: 'red'
                      // type: "solid"
                    }
                  }
                },
                {
                  xAxis: dataY1.length - 1,
                  lineStyle: {
                    color: '#e7cb3c',
                    width: 5
                  },
                  label: {
                    normal: {
                      show: true,
                      position: 'end',
                      formatter: '圆盘剪位置'
                    }
                  }
                }
              ],
              symbol: 'none'
            }
          }
        ]
      }
      var myChart = Echarts.init(document.getElementById(id)) //将配置注入到html中定义的容器
      myChart.setOption(option)
      myChart.resize()
    },
    checkpassdPercent(value) {
      if (typeof value === 'number' && !isNaN(value) && value >= 0) {
        return value
      }
      return 0
    }
  }
}
</script>

<style scoped lang="less">
.box {
  width: 100%;
  height: 100vh;
  background: #001f6b;
  color: #ffffff;
  padding: 30px 20px;
  overflow: hidden;
}
</style>
